<template>
  <div class="list">
    <div class="title">
      <p>主持人管理</p>
    </div>
    <div>
      <div class="yudinginput">
        <div class="inpyuding">
          <input type="text" placeholder="姓名 （可不填）" />
        </div>
        <div class="inpyuding">
          <select>
            <option value="all">账号状态</option>
            <option value="dzc">正常</option>
            <option value="dzc">禁用</option>
          </select>
        </div>
        <div class="inpyuding">
          <select>
            <option value="all">订单量降序</option>
            <option value="dzc">订单量升序</option>
            <option value="yzc">权重降序</option>
            <option value="ysc">权重升序</option>
          </select>
        </div>
        <div class="inpyuding">
          <select>
            <option value="all">星推荐</option>
            <option value="dzc">推荐</option>
            <option value="yzc">不推荐</option>
          </select>
        </div>
        <div class="inpyuding">
          <select>
            <option value="all">折扣</option>
            <option value="dzc">有折扣</option>
            <option value="yzc">无折扣</option>
          </select>
        </div>
      </div>
      <div class="input_btn">
        <el-button type="primary" size="mini">搜索</el-button>
        <el-button type="primary" size="mini" @click="zhrSign">添加主持人</el-button>
      </div>
       <!-- 表格 -->
      <el-table :data="tableData" style="width: 80%" border>
        <el-table-column  width="50" align="center">
                <el-checkbox  name="type"></el-checkbox>
        </el-table-column>
        <el-table-column label="权重" width="100" align="center">
            <el-input type="text" :placeholder="quanz" size="mini"></el-input>
        </el-table-column>
        <el-table-column prop="user" label="姓名" width="100" align="center"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="180" align="center"></el-table-column>
        <el-table-column prop="times" label="开通时间" width="180" align="center"></el-table-column>
        <el-table-column prop="jiage" label="价格" width="80" align="center"></el-table-column>
        <el-table-column prop="dingdanliang" label="订单量" width="50" align="center"></el-table-column>
        <el-table-column prop="zhekou" label="折扣" width="50" align="center"></el-table-column>
        <el-table-column prop="xingtuijian" label="星推荐" width="50" align="center"></el-table-column>
        <el-table-column prop="zhuangtai" label="账号状态" width="80" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
            <el-button type="">权限设置</el-button>
            <el-button type="">禁用账号</el-button>
        </el-table-column>
      </el-table>
      <div style="margin-right:10% ;margin-top:30px" >
          <!-- 分页 -->
        <Fenye />
      </div>
    </div>
   

    <!-- 弹框注册主持人的 -->
    <div>
      <el-dialog
        title="添加账号"
        :visible.sync="dialogVisibleSign"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="formSign" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="formSign.username"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formSign.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="formSign.email"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formSign.password"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleSign = false">取 消</el-button>
          <el-button type="primary" @click="SignZhr">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from "../../../api";
import Fenye from '../../../views/personal/fenyezujian'
export default {
  name: "Zhrlist",
  data() {
    return {
      formw: {},
      formSign: {},
      dialogVisibleSign: false,
      quanz:"100",
      tableData: [
        {
          user: "王小路",
          phone: "1381381438",
          times: "2018/7/15 /10:25",
          jiage: "2000",
          dingdanliang: 18,
          zhekou:8.5,
          xingtuijian: "是",
          zhuangtai: "正常",
          xingtuijian: "是",
        }
      ]
    };
  },
  mounted() {},
  methods: {
    //   主持人注册
    zhrSign() {
      this.dialogVisibleSign = true;
    },
    SignZhr() {
      api
        .getZhuchiren({
          username: this.formSign.username,
          password: this.formSign.password,
          email: this.formSign.email,
          phone: this.formSign.phone
        })
        .then(res => {
          //   console.log(res.data);
          this.dialogVisibleSign = false;
          if (res.data.status == 200) {
            this.$message({
              type: "success",
              message: res.data.msg
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
        });
    },
    handleClose() {
      this.dialogVisibleSign = false;
    }
  },
  components:{
      Fenye
  }

};
</script>

<style lang="less" scoped>
.list {
  box-sizing: border-box;
}
.title {
  p {
    font-size: 16px;
    font-weight: 600;
    color: #000;
  }
}
.yudinginput {
  display: flex;
  color: #000;
  font-size: 16px;
  .inpyuding {
    //   float: left;
    border: solid 1px #000;
    margin: 0 5px;
    padding-left: 10px;
    padding-top: 3px;
    input {
      outline: none;
      border: 0;
    }
    select {
      width: 110px;
      border: solid 0px #000;
      outline: none;
    }
  }
}
.input_btn {
  margin-left: 60px;
  position: relative;
  top: -30px;
  left: 50%;
}
</style>